<div class="rightDiv">
  <div class="exciseTableDiv">
    <div class="searchDiv fl-r" style="margin-bottom: 15px">
      <label>
        <span>姓名：</span>
        <input nz-input placeholder="请输入姓名" [(ngModel)]="searchName"/>
      </label>
      <label>
        <span>工号：</span>
        <input nz-input placeholder="请输入工号" [(ngModel)]="searchNum"/>
      </label>
      <label style="margin-right: 0">
        <button nz-button style="margin-right:10px" nzType="primary" (click)="clickSearch()">查询</button>
        <button nz-button nzType="default" (click)="resetSearch()">重置</button>
      </label>
    </div>
<!--    <button nz-button nzType="primary" style="margin-right: 15px;">同步</button>-->
    <button nz-button nzType="primary" style="margin-right: 15px;" (click)="clickAdd()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>新增
    </button>
    <button nz-button nzType="default"
            nz-popconfirm
            nzOkType="dinitFormanger"
            nzTitle="确定删除所选教师吗?"
            (nzOnCancel)="cancelFn()"
            (nzOnConfirm)="deleteAll()"
            [disabled]="canDelete"
            nzPlacement="top"
    >
      <i nz-icon nzType="delete" nzTheme="outline"></i>删除
    </button>
    <div class="tableTop fl-l" style="margin-bottom: 15px" *ngIf="roleManager == 1">
      <button nz-button nzType="default" (click)="uploadTable()"><i nz-icon nzType="download" nzTheme="outline"></i>导入
      </button>
      <nz-dropdown [nzTrigger]="'hover'">
        <button nz-dropdown nz-button nzType="default"><i nz-icon nzType="upload"
                                                          nzTheme="outline"></i>导出
        </button>
        <ul nz-menu>
          <li nz-menu-item (click)="exportShow(1)">导出选中</li>
          <li nz-menu-item (click)="exportShow(3)">导出全部</li>
        </ul>
      </nz-dropdown>
    </div>
    <div style="margin-top: 35px">
      <ng-template #totalTemplate let-total>总共 {{ pageInfo.totalRecords? pageInfo.totalRecords:0 }} 条</ng-template>
      <nz-table
        #exciseBankTable
        nzBordered
        [nzData]="allList"
        [nzFrontPagination]="false"
        [nzShowPagination]="true"
        [nzPageIndex]="pageInfo.first"
        [nzTotal]="pageInfo.totalRecords"
        [nzShowTotal]="totalTemplate"
        [nzPageSize]="pageInfo.rows"
        [nzLoadingDelay]="1"
        [nzPageSizeOptions]="[10,20,30,50,100]"
        [nzShowQuickJumper]="true"
        [nzShowSizeChanger]="true"
        (nzPageIndexChange)="searchPageIndex($event)"
        (nzPageSizeChange)="searchPageSize($event)"
        (nzCurrentPageDataChange)="currentPageDataChange($event)"
      >
        <thead>
        <tr>
          <th class="tableCheck"
              nzShowCheckbox
              [(nzChecked)]="isAllCheck"
              [nzIndeterminate]="isIndeterminate"
              (nzCheckedChange)="checkAll($event)"
          ></th>
          <th>姓名</th>
          <th>工号</th>
          <th nzCustomFilter>
            部门
            <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter #dropdown>
              <i
                nz-icon
                nzType="search"
                class="ant-table-filter-icon"
                [class.ant-table-filter-open]="dropdown.nzVisible"
                nz-dropdown
              ></i>
              <div class="search-box" style="width: 150px">
                <input type="text" nz-input placeholder="请输入部门" [(ngModel)]="searchDepart"/>
                <button nz-button nzSize="small" nzType="primary" (click)="searchByDepart()" class="search-button">
                  搜索
                </button>
                <button nz-button nzSize="small" (click)="resetDepart()">重置</button>
              </div>
            </nz-dropdown>
          </th>
          <th
            nzShowFilter
            [nzFilters]="filterPositionArr"
            (nzFilterChange)="filterSome($event, 'position')"
          >职务
          </th>
          <th
            nzShowFilter
            [nzFilters]="filterTitleArr"
            (nzFilterChange)="filterSome($event, 'title')"
          >职称
          </th>
          <th
            nzShowFilter
            [nzFilters]="filterTypeArr"
            (nzFilterChange)="filterSome($event,'type')"
          >岗位类型
          </th>
          <th
            nzShowFilter
            [nzFilters]="filterWorkTypeArr"
            (nzFilterChange)="filterSome($event, 'workType')"
          >任职类型
          </th>
          <th
            nzShowFilter
            [nzFilters]="filterSexArr"
            (nzFilterChange)="filterSome($event,'sex')"
          >性别
          </th>
          <th>电话</th>
          <th>邮箱</th>
          <th style="width:220px;">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of exciseBankTable.data">
          <td
            nzShowCheckbox
            [(nzChecked)]="mapOfCheckedId[data.id]"
            (nzCheckedChange)="refreshStatus()"
          ></td>
          <td>{{ data.name ? data.name : '' }}</td>
          <td>{{ data.number ? data.number : ''}}</td>
          <td>{{ data.orgName ? data.orgName : ''}}</td>
          <td>{{ data.position ? data.position : ''}}</td>
          <td>{{ data.title ? data.title : ''}}</td>
          <td>{{ transformPType(data.type)}}</td>
          <td>{{ data.workType ? data.workType : ''}}</td>
          <td>{{ transformSex(data.sex)}}</td>
          <td>{{ data.telphone ? data.telphone : ''}}</td>
          <td>{{ data.email ? data.email : ''}}</td>
          <td>
            <span class="operaFont firOpera" (click)="editUser(data)">编辑</span>
            <span class="operaFont firOpera" (click)="resetPassword(data)">重置密码</span>
            <span class="operaFont operaGreen firOpera" (click)="publishMan(data.id)">分配角色</span>
            <span class="operaFont operaTao"
                  nz-popconfirm
                  nzOkType="danger"
                  nzTitle="确定删除该教师吗?"
                  (nzOnConfirm)="deleteOne(data.id)"
                  nzPlacement="top"
            >删除</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>

<!--新增弹框-->
<nz-modal
  class="modalStyle"
  [(nzVisible)]="showAddModal"
  [nzTitle]="modalTitle2"
  [nzContent]="modalContent2"
  [nzFooter]="modalFooter2"
  (nzOnCancel)="showAddModal = false"
  nzWidth="800px"
  [nzStyle]="{top:'15%'}"
  nzMaskClosable="false"
>
  <ng-template #modalTitle2>
    {{modalTitle}}教师
  </ng-template>

  <ng-template #modalContent2>
    <form nz-form [formGroup]="validateForm">
      <div class="halfDiv">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">姓名</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <input nz-input formControlName="name" id="name" placeholder="请输入姓名"/>
            <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors">
              姓名不能为空！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="number">工号</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <input nz-input formControlName="number" id="number" placeholder="请输入工号"/>
            <nz-form-explain *ngIf="validateForm.get('number')?.dirty && validateForm.get('number')?.errors">
              <span *ngIf="validateForm.getError('required','number')">工号不能为空！</span>
              <span
                *ngIf="!validateForm.getError('required','number') && (validateForm.getError('minlength','number') || validateForm.getError('maxlength','number'))">工号在6-10个字符之间</span>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="orgId">部门</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <nz-tree-select
              formControlName="orgId"
              id="orgId"
              [nzDefaultExpandAll]="true"
              [nzNodes]="nodes"
              nzShowSearch
              nzPlaceHolder="请选择部门"
            >
            </nz-tree-select>
            <nz-form-explain *ngIf="validateForm.get('orgId')?.dirty && validateForm.get('orgId')?.errors">
              部门不能为空！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="position">职务</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <nz-select nzPlaceHolder="请选择职务" id="position" formControlName="position">
              <nz-option [nzValue]="item.keyCode" [nzLabel]="item.keyCode" *ngFor="let item of positionList;"></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="validateForm.get('position')?.dirty && validateForm.get('position')?.errors">
              职务不能为空！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="title">职称</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <nz-select nzPlaceHolder="请选择职称" id="title" formControlName="title">
              <nz-option [nzValue]="item.keyCode" [nzLabel]="item.keyCode" *ngFor="let item of titleList;"></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="validateForm.get('title')?.dirty && validateForm.get('title')?.errors">
              职称不能为空！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="type">岗位类型</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <nz-select nzPlaceHolder="请选择岗位类型" id="type" formControlName="type">
              <nz-option [nzValue]="item.value" [nzLabel]="item.text" *ngFor="let item of filterTypeArr;"></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="validateForm.get('type')?.dirty && validateForm.get('type')?.errors">
              岗位类型不能为空！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="telphone">电话</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <input nz-input formControlName="telphone" id="telphone"
                   placeholder="请输入电话"/>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="halfDiv">
        <div class="userPhoto">
          <span><b>头像</b>图片大小不超过5M</span>
          <img src="{{avatarUrl? avatarUrl: userPhoto}}" alt="">
          <nz-upload
            [nzShowUploadList]="false"
            [nzBeforeUpload]="beforeUpload"
            [nzHeaders]="headerInfo"
            [nzAction]="uploadUrl"
            [nzData]="{'moduleName': 'teacher'}"
            (nzChange)="handleChange($event)"
            nzAccept="'.png,.jpg,.jpeg,.bmg,.gif'"
            nzFileType="image/png,image/jpg,image/jpeg,image/bmp,image/gif"
          >
            <button nz-button><i nz-icon type="upload"></i><span>更换头像</span></button>
          </nz-upload>
        </div>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="title">任职类型</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <nz-select nzPlaceHolder="请选择任职类型" id="workType" formControlName="workType">
              <nz-option [nzValue]="item.keyCode" [nzLabel]="item.keyCode" *ngFor="let item of workTypeList;"></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="validateForm.get('workType')?.dirty && validateForm.get('workType')?.errors">
              任职类型不能为空！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sex">性别</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <nz-select nzPlaceHolder="请选择性别" (ngModelChange)="changePhoto($event)" id="sex" formControlName="sex">
              <nz-option [nzValue]="item.value" [nzLabel]="item.text" *ngFor="let item of filterSexArr;"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="email">邮箱</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <input nz-input formControlName="email" id="email" placeholder="请输入邮箱"/>
            <nz-form-explain *ngIf="validateForm.get('email')?.dirty && validateForm.get('email')?.errors">
              {{validateForm.get('email')?.errors.emailValidator.errorMsg}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </form>
  </ng-template>

  <ng-template #modalFooter2>
    <button nz-button nzType="default" (click)="showAddModal = false">取消</button>
    <button nz-button nzType="primary" [disabled]="validateForm.invalid" (click)="handleOk()">保存</button>
  </ng-template>
</nz-modal>

<!--分配权限-->
<nz-modal
  class="modalStyle"
  [(nzVisible)]="publishModal"
  [nzTitle]="modalTitle1"
  [nzContent]="modalContent1"
  [nzFooter]="modalFooter1"
  (nzOnCancel)="publishModal = false"
  nzWidth="800px"
  [nzStyle]="{top:'15%'}"
  nzMaskClosable="false"
>
  <ng-template #modalTitle1>
    分配角色
  </ng-template>

  <ng-template #modalContent1>
    <nz-transfer
      [nzDataSource]="list"
      [nzListStyle]="{ 'width.px': 300, 'height.px': 300 }"
      [nzTitles]="['未分配角色', '已分配角色']"
      (nzChange)="changeRole($event)"
      (nzSelectChange)="select($event)"
      [nzRender]="render"
    >
      <ng-template #render let-item>{{ item.title }}</ng-template>
    </nz-transfer>
  </ng-template>

  <ng-template #modalFooter1>
    <button nz-button nzType="default" (click)="publishModal = false">取消</button>
    <button nz-button nzType="primary" (click)="saveRole()">保存</button>
  </ng-template>
</nz-modal>
<!--教师信息导入-->
<nz-modal [(nzVisible)]="showExcelModal"
          nzWidth="680px"
          [nzTitle]="modalTitle3"
          [nzContent]="modalContent3"
          (nzOnCancel)="showExcelModal = false"
          [nzFooter]="footModel3"
          nzMaskClosable="false"
>
  <ng-template #modalTitle3>
    教师信息导入
  </ng-template>
  <ng-template #modalContent3>
    <div class="modal-hei over-y">
      <div class="line-3">
        <span>1.下载导入模板</span>
        <span class="color-blue m-l-xs-5 cursor" (click)="exportExclShow()">点击下载</span>
      </div>
      <div class="line-3">
        <span>2.按条件填写信息</span>
      </div>
      <div class="w100">
        <table class="table table-bordered">
          <thead>
          <tr>
            <th>姓名</th>
            <th>工号</th>
            <th>部门</th>
            <th>职务</th>
            <th>职称</th>
            <th>岗位类型</th>
            <th>任职类型</th>
            <th>性别</th>
            <th>电话</th>
            <th>邮箱</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>必填</td>
            <td>选填</td>
            <td>选填</td>
            <td>选填</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="line-3">
        <span>3.上传填好的文档</span>
        <nz-upload
          [nzShowUploadList]="false"
          [nzData]="{'moduleName': 'student'}"
          [(nzFileList)]="fileListImport"
          [nzBeforeUpload]="beforeUploadExcel"
          nzAccept=".xls,.xlsx"
        >
          <span class="color-blue m-l-xs-5 cursor">点击上传 &nbsp;</span>
        </nz-upload>
        <span class="color-blue m-l-xs-5" *ngIf="importExcelName">
            {{importExcelName}}
          <i nz-icon style="margin-left:10px;cursor: pointer;" title="删除" nzType="close-circle" nzTheme="outline"
             (click)="delFile()"></i>
          </span>
      </div>
      <div class="line-3">
        <span>4.点击确定按钮导入文档</span>
      </div>
    </div>
  </ng-template>
  <ng-template #footModel3>
    <button nz-button nzType="default"
            (click)="showExcelModal = false; importExcelName = '';">取消
    </button>
    <button nz-button nzType="primary" (click)="handleUpload()">确定</button>
  </ng-template>
</nz-modal>
